<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="160px"
    class="pms-form pms-details"
    label-position="right"
  >
    <el-row :gutter="24" style="width: calc(100% + 24px)" class="mb8">
      <el-col :span="6">
        <el-form-item label="验工计价月份">
          <el-date-picker
            v-model="form.month"
            class="pms-el-datepicker"
            :disabled="+query.subType !== 1"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="验工计价发起时间"
          prop="month"
        >
          <el-date-picker
            v-model="form.createTime"
            class="pms-el-datepicker"
            :disabled="+query.subType !== 1"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="flex-layout">
        <el-form-item label="" style="width: 100%">
          <el-button
            v-if="showCheckBtn"
            class="pms-button-primary"
            @click="LookaSsessResult"
          >查看考核结果</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin-top:4px;">
        <el-form-item label="验工计价内容" prop="accContent" class="el-textarea-form">
          <el-input
            v-model="form.accContent"
            type="textarea"
            :disabled="+query.subType !== 1"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import checkOutEnum from '@/mixins/checkOutEnum'
import { getYearMonth } from '@/utils/date'
export default {
    name: 'CInspectionForm',
    mixins: [checkOutEnum],
    props: {
        cInspectionForm: {
            type: Object,
            default: () => {
              return {
                  month: '',
                createTime: '',
                accContent: ''
              }
            }
        }
    },
    data() {
        return {
            title: '验工计价基本信息',
            activeName: 'CInspectionForm',
            form: {
                month: '',
                createTime: '',
                accContent: ''
            },
            rules: {
                accContent: [
                    {
                        required: true,
                        message: '请输入验工计价内容',
                        trigger: 'blur'
                    }
                ]
            },
            showCheckBtn: false
        }
    },
    computed: {
        query() {
            return this.$route.query
        }
    },
    watch: {
        cInspectionForm: {
            handler(value) {
        this.form.month = this.query.month || value.insvalMonth
        this.form.createTime = this.query.createTime || value.accTime
        this.form.accContent = this.query.accContent || value.accContent
        if (+this.query.queryType === 1 || +this.query.queryType === 2) {
            this.form.month = getYearMonth()
            this.form.createTime = getYearMonth()
        }
         this.$emit('CInspectionForm', this.form)
        },
        deep: true,
        immediate: true
        }
    },
    methods: {
            // 验工计价基本信息表格校验
        formValid() {
             this.$refs.form.validate(async(valid) => {
                if (valid) {
                    this.$emit('validForm', true)
                } else {
                    this.$emit('validForm', false)
                }
             })
        },
        LookaSsessResult() {
            const prams = {
                month: this.form.month
            }
            this.$emit('LookaSsessResult', prams)
        }
    }
}
</script>
<style lang="scss" scoped>
.pms-form{
    padding-right:0 !important;
       padding-left:0 !important;
    padding-bottom:15px !important;
}
.flex-layout {
    padding-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    ::v-deep .el-form-item__content {
        display: flex;
        justify-content: flex-end;
        right: 0px;
    }
}
.el-textarea-form {
    width: 100%;
    ::v-deep .el-textarea {
        width: 100% !important;
    }

    ::v-deep .el-textarea.is-disabled .el-textarea__inner {
        color: #424242;
        background-color: #f7f7f7;
        border-color: #eaeaea;
        cursor: not-allowed;
    }
    ::v-deep .el-form-item__error{
        margin-top:35px;
    }
}
</style>
